vec2 fixUV(vec2 cood){
  // 最基础的坐标点在左下角
  // return cood.xy/iResolution.xy;
  // 把坐标点移到画布中心
  // return cood.xy/iResolution.xy-vec2(.5);
  // 等同于下面，由公式转化也可知是等价的
  // return(cood.xy-.5*iResolution.xy)/iResolution.xy;
  // 不除以xy，只除以x，使y轴方向不拉伸
  // return(cood.xy-.5*iResolution.xy)/iResolution.xx;
  // iResolution.xx 可以简写为iResolution.x
  // return(cood.xy-.5*iResolution.xy)/iResolution.x;
  // 因为减去了0.5，上面的范围其实是 -0.5～0.5，可乘以2，变为-1~1
  // return(2.*cood.xy-iResolution.xy)/iResolution.x;
  // 不管x，y哪个更大，都以最小的为基准
  return(2.*cood.xy-iResolution.xy)/min(iResolution.x,iResolution.y);
}

void mainImage(out vec4 fragColor,in vec2 fragCoord){
  vec2 vUv=fixUV(fragCoord);
  
  // fragColor=vec4(vUv,0.,1.);
  // fragColor=vec4(vUv,1.,1.);
  
  // 双色渐变
  // float strength=vUv.y;
  // // fragColor=vec4(0.,0.,1.,1.);
  // // fragColor=vec4(1.,1.,1.,1.);
  // fragColor=vec4(strength,strength,1.,1.);
  
  // 通过取模达到反复的效果
  // // 下面为1的倍数取小数位，即2.1～3.0 => 0.1～1.0，3.1～4.0 => 0.1～1.0，以此类推
  // float strength=mod(vUv.y*10.,1.);
  // fragColor=vec4(strength,strength,strength,1.);
  
  // 利用step(edge, x) 如果x < edge，返回0.0否则返回1.0
  // float strength=mod(vUv.y*10.,1.);
  // strength=step(.5,strength);
  // fragColor=vec4(strength,strength,strength,1.);
  
  // 10 条纹相加
  // float strength=step(.9,mod(vUv.x*10.,1.));
  // strength+=step(.9,mod(vUv.y*10.,1.));
  // fragColor=vec4(strength,strength,strength,1);
  
  // 16 使用绝对值
  // float strength=abs(vUv.x-.5);
  // fragColor=vec4(strength,strength,strength,1);
  
  // 画圆
  // float strength=step(.5,distance(vUv,vec2(.5)));
  // fragColor=vec4(strength,strength,strength,1);
  
  // 画圆2
  float c=0.;
  float r=.3;
  if(length(vUv)<=r){
    c=1.;
  }
  fragColor=vec4(vec3(c),1);
}